<script setup lang="ts">
import UniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import {onLoad} from "@dcloudio/uni-app";
const scancodeBtn=()=>{
  // 调起条码扫描
  uni.scanCode({
    // scanType: ["qrCode"],
    onlyFromCamera: true,
    success: (res) => {
      console.log(res);
      let param = res.path.substring(res.path.indexOf("?")+1);
      param=param.substring(param.indexOf("scene=")+6)
      console.log(param);
      uni.setStorage({
        key:'scancode',
        data:param
      })
      uni.switchTab({
        url:'/'+res.path,
      })
    },
    fail: (res) => {
      console.log('未识别到二维码');
    }
  })
}
</script>

<template>
<view class="uni-container-scancode">
  <view class="uni-container-scancode__wrap">
    <view class="uni-container-scancode__wrap_title">
      <text>欢迎使用扫码点餐!</text>
    </view>
    <view>
      <image src="@/static/icon/panzicai.png" class="wan-icon"></image>
    </view>
    <view class="uni-container-scancode__hand-down">
      <text>请点击下方</text>
      <image src="@/static/icon/hand-point-down.png" class="hand-down-icon"></image>
    </view>
  </view>
  <view class="uni-container-scancode__content">
    <view class="uni-container-scancode__content__wrap" @click="scancodeBtn">
      <text>扫码点餐</text>
    </view>
  </view>
</view>
</template>

<style scoped lang="scss">
.uni-container-scancode__hand-down{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #35302b;
  font-weight: normal;
}
.uni-container-scancode__wrap_title{
  font-size:22px;
  font-weight: bolder;
  color: #bd7e00;
}
.wan-icon{
  width: 50px;
  height: 50px;
}
.hand-down-icon{
  width: 24px;
  height: 24px;
}
.uni-container-scancode__wrap{
  width: 100%;
  height: 30% !important;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
}
.uni-container-scancode__content__wrap{
  background-color: whitesmoke;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  padding: 1%;
  color: darkgreen;
  font-size: 16px;
  font-weight: bolder;
  border: 3px solid whitesmoke;
  box-shadow: 0px 0px 6px whitesmoke; /* 阴影效果 */
}
.uni-container-scancode__content{
  text-align: center;
  width: 100%;
  height: 30% !important;
  display: flex;
  justify-content: center;
}
.uni-container-scancode{
  background-color: #C9B9AA;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
}
</style>